<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Datagrid + 组合框</title>
    <script type="text/javascript" src="../easyui-config.js"></script>
</head>
<body>
    <table id="dg" class="easyui-datagrid"></table>
    <script>
        /* https://www.cnblogs.com/sword-successful/p/3395559.html */
        $(() => {
            var editRow = undefined;
            let Address = [{ "value": "1", "text": "CHINA" }, { "value": "2", "text": "USA" }, { "value": "3", "text": "Koren" }];
            $("#dg").datagrid({
                height: 300,
                width: 700,
                title: '学生表',
                collapsible: true,
                singleSelect: true,
                url: null,
                idField: 'ID',
                pagination: true,
                rownumbers: true,
                sortName: "Age",
                sortOrder: "desc",
                pageSize:10,
                data: {
                    total: 500,
                    rows: [
                        { ID: 1, Name: 'Tom', Age: 18 },
                        { ID: 1, Name: 'Tom', Age: 15 },
                        { ID: 1, Name: 'Tom', Age: 18 },
                        { ID: 1, Name: 'Tom', Age: 18 },
                        { ID: 1, Name: 'Tom', Age: 15 },
                        { ID: 1, Name: 'Tom', Age: 13 },
                        { ID: 1, Name: 'Tom', Age: 18 },
                        { ID: 1, Name: 'Tom', Age: 22 },
                        { ID: 1, Name: 'Tom', Age: 18 },
                        { ID: 1, Name: 'Tom', Age: 47 },
                        { ID: 1, Name: 'Tom', Age: 18 }
                    ]
                },
                columns: [[
                    { field: 'ID', title: 'ID', width: 100 },
                    {
                        field: 'Name', title: '姓名', width: 100,
                        editor:
                        {
                            type: 'text', options:
                            {
                                required: true
                            }
                        }
                    },
                    {
                        field: 'Age', title: '年龄', width: 100, align: 'center',
                        editor: {
                            type: 'text', options:
                            {
                                required: true
                            }
                        }
                    },
                    {
                        field: 'Country', title: '国家', width: 100, align: 'center',
                        formatter: function (value, rowData, rowIndex) {
                            if (value == 0) {
                                return;
                            }
                            for (var i = 0; i < Address.length; i++) {
                                if (Address[i].value == value) {
                                    return Address[i].text;
                                }
                            }
                        },
                        editor:
                        {
                            type: 'combobox',
                            options:
                            {
                                data: Address,
                                valueField: "value",
                                textField: "text",
                                value: "请选择国家",
                                panelHeight: 60
                            }
                        }
                    },
                    {
                        field: 'Province', title: '州省', width: 100, align: 'center',

                        formatter: function (value, rowData, rowIndex) {
                            if (value == 0) {
                                return;
                            }
                            for (var i = 0; i < Address.length; i++) {
                                if (Address[i].value == value) {
                                    return Address[i].text;
                                }
                            }
                        },
                        editor:
                        {
                            type: 'combobox',
                            options:
                            {
                                readonly: true,
                                data: Address,
                                valueField: "value",
                                textField: "text",
                                panelHeight: 60
                            }
                        }
                    },
                    {
                        field: 'City', title: '城市', width: 100, align: 'center',
                        formatter: function (value, rowData, rowIndex) {
                            if (value == 0) {
                                return;
                            }
                            for (var i = 0; i < Address.length; i++) {
                                if (Address[i].value == value) {
                                    return Address[i].text;
                                }
                            }
                        },
                        editor:
                        {
                            type: 'combobox',
                            options:
                            {
                                readonly: true,
                                data: Address,
                                valueField: "value",
                                textField: "text",
                                panelHeight: 60
                            }
                        }
                    },
                    {
                        field: 'Area', title: '区域', width: 100, align: 'center',
                        formatter: function (value, rowData, rowIndex) {
                            if (value == 0) {
                                return;
                            }
                            for (var i = 0; i < Address.length; i++) {
                                if (Address[i].value == value) {
                                    return Address[i].text;
                                }
                            }
                        },
                        editor:
                        {
                            type: 'combobox',
                            options:
                            {
                                readonly: true,
                                data: Address,
                                valueField: "value",
                                textField: "text",
                                panelHeight: 60
                            }
                        }
                    }
                ]],
                onAfterEdit: function (rowIndex, rowData, changes) {
                    editRow = undefined;
                },
                onDblClickRow: function (rowIndex, rowData) {
                    if (editRow != undefined) {
                        $("#dg").datagrid('endEdit', editRow);
                    }

                    if (editRow == undefined) {
                        $("#dg").datagrid('beginEdit', rowIndex);
                        editRow = rowIndex;
                    }
                },
                onClickRow: function (rowIndex, rowData) {
                    if (editRow != undefined) {
                        $("#dg").datagrid('endEdit', editRow);
                    }
                },
                onBeginEdit: function (index, row) {
                    var ed1 = $(this).datagrid('getEditor', { index: index, field: 'Country' });
                    var ed2 = $(this).datagrid('getEditor', { index: index, field: 'Province' });
                    var ed3 = $(this).datagrid('getEditor', { index: index, field: 'City' });
                    var ed4 = $(this).datagrid('getEditor', { index: index, field: 'Area' });
                    $(ed1.target).combobox({
                        onSelect: function (newValue, oldValue) {
                            $(ed2.target).combobox('reload', {
                                value: oldValue
                            });
                            $(ed2.target).combobox('readonly', false);
                            $(ed2.target).combobox('setValue', '请选择州省');
                        }
                    });
                    $(ed2.target).combobox({
                        onSelect: function (newValue, oldValue) {
                            $(ed3.target).combobox('reload', {
                                value: oldValue
                            });
                            $(ed3.target).combobox('readonly', false);
                            $(ed3.target).combobox('setValue', '请选择城市');
                        }
                    });
                    $(ed3.target).combobox({
                        onSelect: function (newValue, oldValue) {
                            $(ed4.target).combobox('reload', {
                                value: oldValue
                            });
                            $(ed4.target).combobox('readonly', false);
                            $(ed4.target).combobox('setValue', '请选择区');
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>